﻿@page "/"
<!-- Resolve the Telerik Drawing interop service -->
@using PdfExportJS.Services 
@inject DrawingService DrawingService

<div @ref="@ItemToExport">
    <TelerikGrid Data="@MyData"
                 Pageable="true" Sortable="true" Groupable="true"
                 FilterMode="Telerik.Blazor.GridFilterMode.FilterRow"
                 Resizable="true" Reorderable="true">
        <GridToolBar>
            <TelerikButton Icon="file-pdf" OnClick="@ExportPdf">Export to PDF</TelerikButton>
            <TelerikButton Icon="image" OnClick="@ExportJpg">Export to JPG</TelerikButton>
        </GridToolBar>
        <GridColumns>
            <GridColumn Field="@(nameof(SampleData.Id))" Width="120px" />
            <GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" Groupable="false" />
            <GridColumn Field="@(nameof(SampleData.Team))" Title="Team" />
            <GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />
        </GridColumns>
    </TelerikGrid>

</div>

@code {
    // exporting logic

    ElementReference ItemToExport;

    async Task ExportJpg()
    {
        // Create a data URI from the elementRef
        var data = await DrawingService.ExportImage(ItemToExport);
        // Save the Data URI to a file
        await DrawingService.SaveAs(data, "MyExport.jpg");
    }

    async Task ExportPdf()
    {
        // Create a data URI from the elementRef
        var data = await DrawingService.ExportPDF(ItemToExport);
        // Save the Data URI to a file
        await DrawingService.SaveAs(data, "MyExport.pdf");
    }

    // grid data

    public IEnumerable<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
    {
        Id = x,
        Name = "name " + x,
        Team = "team " + x % 5,
        HireDate = DateTime.Now.AddDays(-x).Date
    });

    public class SampleData
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public DateTime HireDate { get; set; }
    }
}